@charset "UTF-8";
body { background-color: #EFF0F4; }

[data-toggle="fold"] { height: 51px; line-height: 51px; border-bottom: 1px solid #eaf0f2; }

[data-toggle="fold"]:hover { background-color: #fff; border: 0; }

.btn-active { background-color: #23a8f5; color: #fff; border-radius: 4px; cursor: pointer; }

.btn-active:hover { outline: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; color: #353F4F; text-decoration: none; }

.btn-tinge { display: inline-block; height: 100%; color: #95a0a3; }

.btn-tinge:hover { color: #23a8f5; }

i { font-style: normal; }

.left-aside { width: 240px; height: 100%; background-color: #fff; border-right: 1px solid #e2eaed; position: fixed; top: 0; padding-top: 61px; z-index: 99; box-sizing: border-box; }

.left-aside .aside-wrapper { height: 100%; }

.left-aside .left-bar { min-height: 100%; margin-bottom: 1px; }

.left-bar { padding-left: 0; padding-right: 0; height: inherit; }

.left-bar .icon-geren, .left-bar .icon-rongyu { margin-right: 7px; position: relative; top: 1px; }

.left-bar .icon-geren { color: #17C2C2; }

.left-bar .icon-rongyu { color: #9369f9; }

.left-bar .item { position: relative; padding-left: 20px; padding-right: 20px; height: 41px; line-height: 41px; margin: 0; border-bottom: 1px solid #eaf0f2; box-sizing: border-box; /* .btn-select{ position:relative; top:2px; //right:0; font-size:14px; color:#9e9da4; margin:0; &:hover{color:$mainColor;} span{ width:110px; border:1px solid #f2f2f2; position:absolute; right:100%; top:0; background-color:#2f2f2f; border-radius:2px; //display:none; z-index:999; box-shadow:0 0 8px #E1E1E1; i{ display:block; width:100%; height:40px; line-height:40px; text-align:center; color:#fff; cursor:pointer; &:first-child{border-bottom:1px solid #373737;} } } }*/ }

.left-bar .item:first-child { height: 50px; line-height: 50px; }

.left-bar .item:first-child:hover { background-color: #fff; }

.left-bar .item:hover { background-color: #f5f8f9; }

.left-bar .item i.fileicon, .left-bar .item i.fileicon-copy { color: #23a8f5; font-size: 30px; margin-right: 10px; margin-left: 0; }

.left-bar .item i.fileicon-copy { font-size: 26px; position: relative; top: 3px; }

.left-bar .item .progress-name { margin-left: 0; }

.left-bar .item .progress-name:hover { color: #333; }

.left-bar .item span { position: absolute; right: 20px; top: 0; display: none; }

.left-bar .item span:hover { color: #23a8f5; }

.left-bar .item span i { margin-left: 10px; font-size: 14px; }

.left-bar .item span i:hover { color: #23a8f5; }

.left-bar .item:hover > span { display: inline-block; }

.left-bar a { cursor: pointer; }

.new-progress { width: 110px; height: 31px; line-height: 31px; margin-top: 20px; margin-bottom: 20px; color: #23a8f5; }

.new-progress + div { border-top: 1px solid #eaf0f2; }

.new-progress:hover { color: #333; }

.new-progress i { position: relative; top: 1px; margin-left: 8px; }

.left-bar .active { background-color: #f5f8f9; border-color: #e2eaed; }

.left-bar .allItem { width: 100%; height: 50px; line-height: 50px; padding-left: 20px; padding-right: 20px; border: 1px solid #eaf0f2; margin: 0; box-sizing: border-box; overflow: hidden; cursor: pointer; }

/*---------------------------------------------- right-header -----------------------------------------------*/
.date { min-width: 280px; float: left; position: relative; margin-left: 60px; }

.date i { position: absolute; right: 30px; top: 30px; font-size: 28px; color: #23a8f5; }

.right-header { height: 80px; background-color: #fff; overflow: hidden; }

.right-header .invitation { width: 130px; height: 44px; line-height: 44px; margin-top: 18px; }

.right-header .invitation i { position: relative; top: 1px; }

.right-header .title { font-size: 1.2em; float: left; padding-left: 40px; }

.right-header .title span { display: block; width: 70px; height: 80px; line-height: 80px; border-bottom: 3px solid #23a8f5; box-sizing: border-box; }

.right-header .searchUser { float: left; width: 440px; margin-left: 60px; height: 44px; line-height: 44px; margin-top: 18px; border: 1px solid #23a8f5; color: #23a8f5; border-radius: 3px; padding: 0 15px; overflow: hidden; }

.right-header .searchUser input { border: none; height: 42px; outline: none; display: block; float: left; width: 90.90909%; }

.right-header .searchUser i { display: block; float: right; cursor: pointer; }

.daterangepicker { position: absolute; color: inherit; background-color: #fff; border-radius: 4px; width: 278px; padding: 4px; margin-top: 1px; top: 100px; left: 20px; /* Calendars */ }

.daterangepicker:before, .daterangepicker:after { position: absolute; display: inline-block; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; }

.daterangepicker:before { top: -7px; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #ccc; }

.daterangepicker:after { top: -6px; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; }

.daterangepicker.opensleft:before { right: 9px; }

.daterangepicker.opensleft:after { right: 10px; }

.daterangepicker.openscenter:before { left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; }

.daterangepicker.openscenter:after { left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; }

.daterangepicker.opensright:before { left: 9px; }

.daterangepicker.opensright:after { left: 10px; }

.daterangepicker.dropup { margin-top: -5px; }

.daterangepicker.dropup:before { top: initial; bottom: -7px; border-bottom: initial; border-top: 7px solid #ccc; }

.daterangepicker.dropup:after { top: initial; bottom: -6px; border-bottom: initial; border-top: 6px solid #fff; }

.daterangepicker.dropdown-menu { max-width: none; z-index: 3001; }

.daterangepicker.single .ranges, .daterangepicker.single .calendar { float: none; }

.daterangepicker.show-calendar .calendar { display: block; }

.daterangepicker .calendar { display: none; max-width: 270px; margin: 4px; }

.daterangepicker .calendar.single .calendar-table { border: none; }

.daterangepicker .calendar th, .daterangepicker .calendar td { white-space: nowrap; text-align: center; min-width: 32px; }

.daterangepicker .calendar-table { border: 1px solid #fff; padding: 4px; border-radius: 4px; background-color: #fff; }

.daterangepicker table { width: 100%; margin: 0; }

.daterangepicker td, .daterangepicker th { text-align: center; width: 20px; height: 20px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; }

.daterangepicker td.available:hover, .daterangepicker th.available:hover { background-color: #eee; border-color: transparent; color: inherit; }

.daterangepicker td.week, .daterangepicker th.week { font-size: 80%; color: #ccc; }

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { background-color: #fff; border-color: transparent; color: #999; }

.daterangepicker td.in-range { background-color: #ebf4f8; border-color: transparent; color: #000; border-radius: 0; }

.daterangepicker td.start-date { border-radius: 4px 0 0 4px; }

.daterangepicker td.end-date { border-radius: 0 4px 4px 0; }

.daterangepicker td.start-date.end-date { border-radius: 4px; }

.daterangepicker td.active, .daterangepicker td.active:hover { background-color: #357ebd; border-color: transparent; color: #fff; }

.daterangepicker th.month { width: auto; }

.daterangepicker td.disabled, .daterangepicker option.disabled { color: #999; cursor: not-allowed; text-decoration: line-through; }

.daterangepicker select.monthselect, .daterangepicker select.yearselect { font-size: 12px; padding: 1px; height: auto; margin: 0; cursor: default; }

.daterangepicker select.monthselect { margin-right: 2%; width: 56%; }

.daterangepicker select.yearselect { width: 40%; }

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { width: 50px; margin-bottom: 0; }

.daterangepicker .input-mini { border: 1px solid #ccc; border-radius: 4px; color: #555; height: 30px; line-height: 30px; display: block; vertical-align: middle; margin: 0 0 5px 0; padding: 0 6px 0 28px; width: 100%; }

.daterangepicker .input-mini.active { border: 1px solid #08c; border-radius: 4px; }

.daterangepicker .daterangepicker_input { position: relative; }

.daterangepicker .daterangepicker_input i { position: absolute; left: 8px; top: 8px; }

.daterangepicker.rtl .input-mini { padding-right: 28px; padding-left: 6px; }

.daterangepicker.rtl .daterangepicker_input i { left: auto; right: 8px; }

.daterangepicker .calendar-time { text-align: center; margin: 5px auto; line-height: 30px; position: relative; padding-left: 28px; }

.daterangepicker .calendar-time select.disabled { color: #ccc; cursor: not-allowed; }

.ranges { font-size: 11px; float: none; margin: 4px; text-align: left; }

.ranges ul { list-style: none; margin: 0 auto; padding: 0; width: 100%; }

.ranges li { font-size: 13px; background-color: #f5f5f5; border: 1px solid #f5f5f5; border-radius: 4px; color: #08c; padding: 3px 12px; margin-bottom: 8px; cursor: pointer; }

.ranges li:hover { background-color: #08c; border: 1px solid #08c; color: #fff; }

.ranges li.active { background-color: #08c; border: 1px solid #08c; color: #fff; }

/*  Larger Screen Styling */
@media (min-width: 564px) { .daterangepicker { width: auto; }
  .daterangepicker .ranges ul { width: 160px; }
  .daterangepicker.single .ranges ul { width: 100%; }
  .daterangepicker.single .calendar.left { clear: none; }
  .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar { float: left; }
  .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar { float: right; }
  .daterangepicker.ltr { direction: ltr; text-align: left; }
  .daterangepicker.ltr .calendar.left { clear: left; margin-right: 0; }
  .daterangepicker.ltr .calendar.left .calendar-table { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .daterangepicker.ltr .calendar.right { margin-left: 0; }
  .daterangepicker.ltr .calendar.right .calendar-table { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .daterangepicker.ltr .left .daterangepicker_input { padding-right: 12px; }
  .daterangepicker.ltr .calendar.left .calendar-table { padding-right: 12px; }
  .daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar { float: left; }
  .daterangepicker.rtl { direction: rtl; text-align: right; }
  .daterangepicker.rtl .calendar.left { clear: right; margin-left: 0; }
  .daterangepicker.rtl .calendar.left .calendar-table { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .daterangepicker.rtl .calendar.right { margin-right: 0; }
  .daterangepicker.rtl .calendar.right .calendar-table { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .daterangepicker.rtl .left .daterangepicker_input { padding-left: 12px; }
  .daterangepicker.rtl .calendar.left .calendar-table { padding-left: 12px; }
  .daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar { text-align: right; float: right; } }

@media (min-width: 730px) { .daterangepicker .ranges { width: auto; }
  .daterangepicker.ltr .ranges { float: left; }
  .daterangepicker.rtl .ranges { float: right; }
  .daterangepicker .calendar.left { clear: none !important; } }

/*--------------------------------------------- Util --------------------------------------------*/
body { font-family: "微软雅黑",arial; color: #333; }

/**tooltip**/
.tooltip-inner { padding: 0 12px; height: 34px; line-height: 34px; border-radius: 2px; font-size: 14px; }

/**end**/
.team-information .btn-select, .projects-course .btn-select { position: relative; top: 0; right: 8px; font-size: 14px; color: #9e9da4; }

.team-information .btn-select:hover, .projects-course .btn-select:hover { color: #23a8f5; }

.team-information .btn-select i, .projects-course .btn-select i { cursor: pointer; }

.team-information .btn-select i:hover, .projects-course .btn-select i:hover { color: #23a8f5; }

.team-information .btn-select span, .projects-course .btn-select span { border: 1px solid #f2f2f2; position: absolute; left: 50%; margin-left: -55px; top: 21px; background-color: #fff; display: none; z-index: 999; box-shadow: 0 0 8px #E1E1E1; }

.team-information .btn-select span i, .projects-course .btn-select span i { display: block; width: 110px; height: 25px; line-height: 25px; text-align: center; color: #333; }

.team-information .btn-select span i:first-child, .projects-course .btn-select span i:first-child { border-bottom: 1px solid #f2f2f2; }

.bg-white { background-color: #fff; }

.elli { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.right-box { padding-top: 20px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.hand { position: relative; width: 100%; height: 20px; line-height: 20px; }

.hand .handing { font-family: "微软雅黑",arial; position: absolute; top: 0; left: 0; margin: 0; font-size: 18px; color: #333; letter-spacing: 1px; }

.hand .add, .hand .edit { display: block; position: absolute; top: 0; right: 0; color: #23a8f5; cursor: pointer; }

.base-message, .projects-course, .team-information { margin-top: 20px; padding: 30px 60px; }

/*--------------------------------------------- 模态框（modal） ---------------------------------------------*/
.modal.fade .modal-dialog { width: 100%; height: 100%; margin-top: 0; }

@media (min-width: 768px) { .modal-dialog { margin: 0; } }

.modal-content { width: 780px; margin: 0 auto; border-radius: 0; overflow: hidden; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); }

.modal-header { height: 60px; color: #333; padding-top: 18px; box-sizing: border-box; background-color: #f1f1f1; }

.modal-body { width: 100%; padding: 0; font-size: 14px; color: #333; }

.modal-body .bd-box { width: 490px; margin-top: 40px; margin-left: auto; margin-right: auto; }

.modal-body .item { padding-left: 30px; padding-right: 30px; border-bottom: 1px solid #f1f1f1; }

.modal-body .add { color: #23a8f5; cursor: pointer; margin-right: 30px; }

.modal-body .add i { position: relative; top: 1px; margin-right: 10px; }

.modal-footer { padding: 30px 40px; border-top: 0; }

.modal-footer .btn { width: 140px; height: 40px; font-size: 14px; border-radius: 0; border: 0; outline: 0; }

.modal-footer .save { background-color: #23a8f5; color: #fff; }

.item-label { display: inline-block; height: 40px; line-height: 40px; position: relative; box-sizing: border-box; white-space: nowrap; }

.project-bewrite, .project-brief { margin-top: 20px; margin-bottom: 20px; }

.comment-text, .modal input { height: 40px; line-height: 40px; outline: 0; color: #222; background-color: #f7f7f7; border: 1px solid #f2f2f2; box-sizing: border-box; }

.comment-text { width: 618px; resize: none; padding: 0; padding-left: 20px; overflow: hidden; }

.comment-text:focus { border-color: #23a8f5; box-shadow: 0 0 5px #23a8f5; }

.focus { height: 120px; line-height: 180%; padding: 7px 20px; word-wrap: break-word; word-break: break-all; overflow: auto; overflow-x: hidden; }

.modal input { display: inline-block; margin-left: 0; padding-left: 20px; padding-right: 20px; }

.modal input:focus { border-color: #23a8f5; box-shadow: 0 0 5px #23a8f5; }

.item-tips { position: relative; top: -15px; padding-right: 30px; box-sizing: border-box; }

.err { color: #e53f42; margin-left: 110px; margin-top: 10px; }

.show-word { display: none; color: #666; }

.show-word i { color: #23a8f5; padding-left: 3px; padding-right: 3px; font-size: 18px; position: relative; top: 1px; }

.add-btn { margin-left: 90px; margin-bottom: 40px; height: 30px; line-height: 30px; }

.add-btn i { color: #23a8f5; font-size: 30px; margin-right: 10px; cursor: pointer; }

.add-btn span { font-size: 14px; position: relative; top: -6px; }

span.blue-start { padding-left: 5px; padding-right: 5px; color: #23a8f5; font-size: 21px; position: relative; top: 7px; }

.call-name { width: 75px; white-space: nowrap; }

.select-box { width: 415px; border: 1px solid #23a8f5; border-radius: 4px; position: relative; top: -12px; }

.select-box a { display: block; width: 100%; height: 48px; line-height: 48px; color: #666; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }

.select-box a i { font-size: 21px; color: #999; }

.select-box .btn-unfold { color: #999; }

.select-box .options, .select-box .options i { display: none; }

.select-box .options-item { cursor: pointer; }

.select-box .options-item:hover { color: #333; background-color: #f4f8fb; }

.select-box .options-item:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }

.select-box .options .selected { color: #333; background-color: #f4f8fb; }

.select-box .options .selected i { display: inline-block; color: #23a8f5; }

/*确认删除*/
#del-modal .modal-body { width: 100%; }

#del-modal .modal-body .text-tip { margin: 0 auto; width: 780px; height: 114px; line-height: 134px; text-align: center; overflow: hidden; font-size: 16px; }

#del-modal .modal-footer { text-align: center; }

#del-modal .modal-footer .cancel { width: 140px; height: 50px; line-height: 50px; padding: 0; border: 0; background-color: #f1f1f1; border-radius: 2px; }

#del-modal .modal-footer .confirm { width: 200px; height: 50px; line-height: 50px; padding: 0; border: 0; border-radius: 2px; background-color: #23a8f5; }

#del-modal .modal-footer .btn + .btn { margin-left: 20px; }

/*添加跟进人*/
#add-people-modal .modal-content { width: 720px; }

#add-people-modal .item { padding-top: 10px; padding-bottom: 10px; }

#add-people-modal .add { height: 40px; line-height: 40px; }

#add-people-modal #search-person { width: 618px; background-color: transparent; border: 0; box-shadow: none; padding: 0; }

#add-people-modal .select-people { display: none; }

#add-people-modal .select-people p { margin-bottom: 0; }

#add-people-modal .select-people span { display: inline-block; height: 35px; line-height: 35px; }

#add-people-modal .selected { margin-bottom: 30px; }

#add-people-modal .selected span { margin-top: 10px; margin-right: 10px; padding: 7px 10px; background-color: #e9f6fe; color: #23a8f5; border-radius: 4px; }

#add-people-modal .selected .handing { background-color: inherit; color: inherit; padding-left: 0; margin-left: 0; }

#add-people-modal .selected .name { padding-left: 10px; padding-right: 20px; }

#add-people-modal .selected .del { cursor: pointer; }

/*非跟进人提示框*/
#no-permission-modal .modal-body .text-tip { margin: 0 auto; width: 780px; height: 114px; display: table-cell; vertical-align: middle; text-align: center; overflow: hidden; font-size: 16px; }

#no-permission-modal .modal-footer .confirm { width: 200px; height: 50px; line-height: 50px; padding: 0; border: 0; border-radius: 2px; background-color: #23a8f5; }

#no-permission-modal .modal-footer { text-align: center; padding-top: 0; }

#no-permission-modal .modal-content { border-radius: 6px; }

/*项目重要历程*/
#project-course-modal .item { padding: 30px 40px 10px 40px; }

#project-course-modal .item-label { width: 80px; }

#project-course-modal .main-message { position: relative; }

#project-course-modal .date-picker { cursor: pointer; }

#project-course-modal .err { margin-left: 100px; }

/*团队信息*/
#team-modal .item { padding: 30px 40px 10px 40px; box-sizing: border-box; }

#team-modal .main-message { height: 40px; line-height: 40px; }

#team-modal .main-message span + input { width: 140px; margin-right: 25px; }

#team-modal .main-message .actor + input, #team-modal .main-message .phone + input { margin-left: 10px; }

#team-modal .comment-text { width: 608px; }

#team-modal span { display: inline-block; }

#team-modal .item-label { width: 90px; padding-left: 14px; }

#team-modal .item-label:after { display: block; content: "✲"; color: #23a8f5; position: absolute; top: 0; left: 0; }

/*基本信息*/
#base-message-modal .item { padding: 30px 40px 10px 40px; box-sizing: border-box; }

#base-message-modal .project-name input { width: 618px; }

#base-message-modal .book-name { display: block; width: 150px; height: 40px; line-height: 40px; margin-right: 20px; color: #23a8f5; text-decoration: underline; cursor: pointer; }

#base-message-modal .select { position: relative; width: 130px; }

#base-message-modal .select input { width: 130px; }

#base-message-modal .select > i { position: absolute; top: 12px; right: 12px; font-size: 21px; color: #b2b2b2; }

#base-message-modal .select .options-box { position: absolute; left: 0; top: 41px; width: 100%; max-height: 250px; overflow: auto; overflow-x: hidden; border: 1px solid #23a8f5; box-shadow: 0 0 3px #23a8f5; background-color: #fff; z-index: 1999; display: none; }

#base-message-modal .select .options-box .options { display: block; height: 40px; line-height: 40px; cursor: pointer; padding-left: 20px; padding-right: 8px; text-align: left; color: #666; box-sizing: border-box; }

#base-message-modal .select .options-box .options:hover { background-color: #f4f8fb; color: #333; }

#base-message-modal .select .options-box .options i { display: none; }

#base-message-modal .select .options-box .selected { background-color: #f4f8fb; color: #333; }

#base-message-modal .select .options-box .selected i { font-size: 24px; color: #23a8f5; display: block; }

#base-message-modal .mar-left { margin-left: 20px; }

#base-message-modal .mar-top { margin-top: 20px; }

#base-message-modal .equity { width: 130px; }

#base-message-modal .link { width: 260px; height: 40px; }

#base-message-modal .upload-btn { color: #23a8f5; cursor: pointer; }

#base-message-modal .upload-btn i { position: relative; top: 1px; margin-right: 10px; }

#base-message-modal .tag-text { width: 100px; margin-right: 25px; }

#base-message-modal .tag-box { width: 424px; }

#base-message-modal .tag-box .tag { display: inline-block; height: 40px; line-height: 40px; padding-left: 20px; padding-right: 10px; background-color: #f7f7f7; border: 1px solid #f2f2f2; box-sizing: border-box; margin-right: 10px; margin-bottom: 10px; }

#base-message-modal .tag-box .tag i.del { cursor: pointer; margin-left: 15px; color: #b2b2b2; }

#base-message-modal .tag-box .tag i.del:hover { color: #23a8f5; }

.upload { width: 60px; height: 40px; line-height: 40px; position: relative; overflow: hidden; }

#file { width: 200px; height: 100%; position: absolute; right: 0; top: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }

/*--------------------------------------------- 头部(Header) ---------------------------------------------*/
.header { min-width: 720px; padding: 40px 60px; box-sizing: border-box; color: #333; }

#logoButton { cursor: pointer; }

.projects-logo { width: 100px; height: 100px; background-color: #f2f2f2; margin-right: 40px; }

.projects-logo .first-word { line-height: 100px; font-size: 56px; color: #23a8f5; }

.title { width: 620px; height: 100px; margin-top: 30px; position: relative; font-size: 22px; }

.title p { max-width: 100%; margin-bottom: 0; height: 30px; }

@media screen and (min-width: 1300px) { .title { margin-top: 0; } }

.button { height: 40px; margin-top: 30px; margin-left: auto; margin-right: 40px; }

.button:last-child { margin-right: 0; }

.button p { display: inline-block; margin-bottom: 0; width: 180px; height: 40px; line-height: 40px; font-size: 14px; color: #808080; border: 1px solid #808080; box-sizing: border-box; cursor: pointer; }

.button p:hover { color: #fff; background-color: #23a8f5; border-color: #23a8f5; }

.follow-people span { margin-left: 5px; }

/*-------------------------------------------- 导航（Nav) -------------------------------------------*/
.project-navbar { height: 60px; line-height: 60px; margin-top: 20px; }

.project-navbar ul { width: 664px; margin: 0 auto; padding: 0; list-style-type: none; }

.project-navbar ul li { float: left; margin-left: 66px; }

.project-navbar ul li:first-child { margin-left: 0; }

.project-navbar ul a { display: inline-block; width: 80px; height: 60px; color: #666; font-size: 16px; box-sizing: border-box; border-bottom: 3px solid #fff; }

.project-navbar ul a:hover { color: #23a8f5; border-bottom: 3px solid #23a8f5; }

.project-navbar ul a:active { color: #23a8f5; border-bottom: 3px solid #23a8f5; }

.project-navbar .current-view { color: #23a8f5; border-bottom: 3px solid #23a8f5; }

/*-------------------------------------------- 项目基本信息（Base message) -------------------------------------------*/
.brief { margin-top: 22px; line-height: 180%; color: #7f7f7f; }

.projects-file { margin-top: 20px; color: #222; }

.projects-file .link { margin-left: 80px; }

.projects-file a { color: #23a8f5; text-decoration: underline; }

.sort { display: inline-block; color: #222; font-size: 14px; background-color: #f5f8f9; margin-top: 30px; padding-bottom: 18px; box-sizing: border-box; }

.sort span { display: block; padding-left: 40px; padding-right: 40px; margin-top: 18px; }

.sort span i { margin-right: 10px; font-size: 24px; color: #23a8f5; position: relative; top: 2px; }

.tag .tit { margin-left: 0; padding-left: 0; background-color: inherit; color: #222; }

.tag span { margin-top: 10px; margin-left: 10px; padding: 7px 10px; color: #23a8f5; background-color: #e9f6fe; border-radius: 4px; }

/*------------------------------------------- 项目重要历程（Project course) ------------------------------------------*/
.message { font-size: 14px; }

.message .message-item { margin-top: 30px; }

.message p { margin: 0; }

.message .icon-circle { display: inline-block; width: 16px; height: 16px; margin-right: 20px; background-color: #8bcef5; border-radius: 50%; position: relative; top: 1px; left: 0; }

.message .icon-circle:after { display: block; content: ""; width: 10px; height: 10px; border-radius: 50%; background-color: #23a8f5; position: absolute; top: 50%; left: 50%; margin-top: -5px; margin-left: -5px; }

.message .time { margin-right: 12px; color: #222; position: relative; top: -2px; }

.message .text { margin-left: 36px; color: #666; position: relative; top: -2px; }

/*------------------------------------------- 团队信息（Team information) ------------------------------------------*/
.people-message { padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #f1f1f1; box-sizing: border-box; }

.people-message .people-info { margin-bottom: 20px; }

.people-message .people-name { font-size: 18px; color: #222; }

.people-message .info { padding-left: 16px; font-size: 16px; color: #999; }

.people-message .people-link { height: 30px; line-height: 30px; border-radius: 15px; background-color: #f5f8f9; padding-left: 15px; padding-right: 15px; }

.people-message .phone { color: #23a8f5; }

/*-------------------------------------------- 上传进度条(progress bar) --------------------------------------------*/
.pmgressbar-box { height: 40px; margin-left: 20px; display: none; }

.pmgressbar { width: 200px; height: 16px; border-radius: 8px; background-color: #f5f5f5; overflow: hidden; position: relative; top: 12px; margin-right: 20px; }

.pmgressbar span { position: absolute; left: 0; top: 0; width: 60%; height: 100%; background-color: #e10005; }

.pmgressbar-cancel { width: 16px; height: 16px; line-height: 16px; border-radius: 50%; background-color: #ccd1d9; position: relative; top: 12px; cursor: pointer; }

.pmgressbar-cancel i { font-size: 9px; font-weight: bold; color: #fff; position: relative; top: -2px; left: 3px; }

#cutpic-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 300; display: none; }

.cutpic-content { width: 685px; padding: 20px; background-color: #fff; box-sizing: border-box; border-radius: 4px; overflow: hidden; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }

.preview { margin-left: 15px; margin-bottom: 5px; width: 150px; height: 150px; overflow: hidden; }

.current-pic { width: 480px; height: 360px; }

.current-pic-btn { margin-top: 20px; margin-bottom: 0; text-align: center; }

.current-pic-btn button { border: 0; outline: 0; color: #fff; margin-left: 20px; margin-right: 20px; }

.current-pic-btn .save-cut-logo { padding: 5px 15px; border-radius: 4px; background-color: #23a8f5; }

.current-pic-btn .save-cut-logo:hover { background-color: #003366; }

.current-pic-btn .cancel-upload-logo { padding: 3px 8px; border-radius: 2px; color: #333; background-color: transparent; }

.current-pic-btn .cancel-upload-logo:hover { background-color: #f1f1f1; }

.hot { margin-left: 30px; }

.hot .hot-bd { position: relative; }

.hot .hot-bd .change-batch { display: inline-block; width: 80px; height: 27px; line-height: 27px; position: absolute; right: 0; bottom: 0; color: #23a8f5; cursor: pointer; }

.hot .hot-bd .change-batch:hover { text-decoration: underline; }

.hot .hot-item { width: 100%; max-height: 94px; overflow: hidden; }

.hot .hot-item span { display: inline-block; width: 80px; height: 27px; line-height: 27px; border: 1px solid #c9c9c9; border-radius: 6px; color: #797979; margin-top: 20px; margin-right: 15px; text-align: center; cursor: pointer; float: left; }

.hot .hot-item span:hover { color: #23a8f5; border-color: #23a8f5; }

.hot [data-liffect="bounceIn"] span { opacity: 0; position: relative; -webkit-animation: bounceIn 600ms ease both; -webkit-animation-play-state: paused; -moz-animation: bounceIn 600ms ease both; -moz-animation-play-state: paused; -o-animation: bounceIn 600ms ease both; -o-animation-play-state: paused; animation: bounceIn 600ms ease both; animation-play-state: paused; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; }

@-webkit-keyframes bounceIn { 0% { opacity: 0;
    -webkit-transform: scale(0.3); }
  50% { -webkit-transform: scale(1.05); }
  70% { -webkit-transform: scale(0.9); }
  100% { opacity: 1;
    -webkit-transform: scale(1); } }

@-moz-keyframes bounceIn { 0% { opacity: 0;
    -moz-transform: scale(0.3); }
  50% { -moz-transform: scale(1.05); }
  70% { -moz-transform: scale(0.9); }
  100% { opacity: 1;
    -moz-transform: scale(1); } }

@-o-keyframes bounceIn { 0% { opacity: 0;
    -o-transform: scale(0.3); }
  50% { -o-transform: scale(1.05); }
  70% { -o-transform: scale(0.9); }
  100% { opacity: 1;
    -o-transform: scale(1); } }

@keyframes bounceIn { 0% { opacity: 0;
    transform: scale(0.3); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { opacity: 1;
    transform: scale(1); } }
